<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <view class="content-head">
        <view class="user-href-box">
          <image
            class="user-href-bg"
            src="http://tianxin100we10.cyyvip.com/web/uploads/images/store_1/2021-06-29/c6d5e02cf7e46a691768cdaa630b95f2f842e1f0.png"
          />
          <image class="user-href" :src="userInfo.avatar_url" />
        </view>
        <view class="user-code">
          <image :src="userCode" />
          <!-- <view>会员码每30 秒自动更新</view> -->
        </view>
      </view>
      <view class="content-foot">
        <view class="line"></view>
        <image
          src="http://tianxin100we10.cyyvip.com/web/uploads/images/store_1/2021-06-29/8c0db39d1e556689944ee6b4b0d9dae1a8aeb9de.png"
        />
        <view>{{ $t('facePay.rules') }}</view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      userInfo: {},
      userCode: '',
    };
  },
  onShow() {
    const isLogin = this.$utils.isLogin();
    if (isLogin) {
      let userInfo = uni.getStorageSync('userInfo');
      this.userInfo = userInfo;
      this.getUserCode();
    }
  },
  methods: {
    // 获取用户核销码
    getUserCode() {
      this.$allrequest.facePay.getUserCode().then(res => {
        if (!res.code && res.data) {
          this.userCode = res.data.url;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #222222;

  .page-content {
    width: 690rpx;
    margin: 0 auto;
    padding-top: 70rpx;
    .content-head {
      background: #ffffff;
      border-radius: 24rpx 24rpx 0 0;
      position: relative;
      padding-top: 131rpx;
      .user-href-box {
        width: 204rpx;
        height: 144rpx;
        position: absolute;
        left: calc(50% - 102rpx);
        top: -70rpx;
        z-index: 11;

        .user-href-bg {
          width: 100%;
          height: 100%;
          display: block;
        }

        .user-href {
          width: 100rpx;
          height: 100rpx;
          background: #f2f2f2;
          border-radius: 50%;
          position: absolute;
          left: calc(50% - 50rpx);
          top: 20rpx;
          z-index: 12;
        }
      }
      .user-code {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 0 0 70rpx 0;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1;
        image {
          width: 350rpx;
          height: 350rpx;
          display: block;
          background-color: beige;
          margin-bottom: 40rpx;
        }
      }
    }
    .content-head::before {
      content: '';
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      left: -18rpx;
      bottom: -18rpx;
      z-index: 11;
      border-radius: 50%;
      background-color: #222222;
    }
    .content-head::after {
      content: '';
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      right: -18rpx;
      bottom: -18rpx;
      z-index: 11;
      border-radius: 50%;
      background-color: #222222;
    }
    .content-foot {
      background: #ffffff;
      border-radius: 0 0 24rpx 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191919;
      padding-bottom: 115rpx;
      .line {
        width: 610rpx;
        height: 2rpx;
        border: 1rpx dashed #d8d9d8;
        margin: 0 auto;
      }
      image {
        width: 160rpx;
        height: 212rpx;
        display: block;
        margin: 115rpx auto 21rpx;
      }
    }
  }
}
</style>
